<template>
  <div class="travel-illegal">
    <search-header :title="reportsTitle"></search-header>
    <!--<div class="content">
      <Tabs value="">
        <span slot="extra" class="tab-left">XX公司违规记录</span>
        <TabPane label="部门违规统计" name="name1">
          <div class="fix">
            <div class="fl chart">
              &lt;!&ndash;<div id="violationDpment" :style="{width:'480px',height:'360px'}"></div>&ndash;&gt;
            </div>
            <div class="fr orderTab">
              <div class="tabTopNm"><span>{{viMonth}}</span>部门违规记录排名</div>
              <Table class="tabBorderNo" stripe height="360" :columns="columnsStaff" :data="dataStaff"></Table>
            </div>
          </div>
        </TabPane>
        <TabPane label="员工违规统计" name="name2">
          <div class="fix">
            <div class="fl chart">
              <div id="violationStaff" :style="{width:'480px',height:'360px'}"></div>
            </div>
            <div class="fr orderTab">
              <div class="tabTopNm"><span>{{viMonth}}</span>部门违规记录排名</div>
              <Table class="tabBorderNo" stripe height="360" :columns="columnsStaff" :data="dataStaff"></Table>
            </div>
          </div>
        </TabPane>
        <TabPane label="趋势分析" name="name3">
          <div class="fix">
            <div class="fl chart">
              <div id="violation" :style="{width:'480px',height:'360px'}"></div>
            </div>
            <div class="fr orderTab">
              123
            </div>
          </div>
        </TabPane>
      </Tabs>
    </div>-->
    <div class="con fix">
      <div class="fl con-left">
        <div class="title-left">XX公司违规记录</div>
        <div id="violationDpment" :style="{width:'480px',height:'360px'}"></div>
      </div>
      <div class="fl con-right">
        <div class="title-right">
          <Tabs>
            <TabPane label="部门违规统计" name="name1">
              <div class="tabTopNm"><span>{{viMonth}}</span>部门违规记录排名</div>
              <Table class="tabBorderNo" stripe :columns="columnsStaff" :data="dataStaff"></Table>
            </TabPane>
            <TabPane label="员工违规统计" name="name2">
              <div class="tabTopNm"><span>{{viMonth}}</span>部门违规记录排名</div>
              <Table class="tabBorderNo" stripe :columns="columnsStaff" :data="dataStaff"></Table>
            </TabPane>
            <TabPane label="趋势分析" name="name3">
              <div class="tabTopNm"><span>{{viMonth}}</span>部门违规记录排名</div>
              <Table class="tabBorderNo" stripe :columns="columnsStaff" :data="dataStaff"></Table>
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import echarts from 'echarts';
  import SearchHeader from '@/components/bi/search-header.vue';
  export default {
    name: 'bi-illegal',
    components: {SearchHeader},
    data() {
      return {
        reportsTitle: '员工违规记录',
        viMonth: '4月',
        columnsStaff: [
          {
            title: '部门',
            key: 'department'
          },
          {
            title: '订单总数',
            key: 'orderTotal'
          },
          {
            title: '违规次数',
            key: 'violaNumber'
          },
          {
            title: '违规率',
            key: 'violaRate'
          },
          {
            title: '操作',
            key: 'action',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  }
                }, '查看明细')
              ]);
            }
          }
        ],
        dataStaff: [
          {
            department: '技术部',
            orderTotal: '2345',
            violaNumber: '23',
            violaRate: '10.99%',
            action: '查看明细'
          },
          {
            department: '技术部1',
            orderTotal: '2345',
            violaNumber: '23',
            violaRate: '10.99%',
            action: '查看明细'
          },
          {
            department: '技术部w',
            orderTotal: '2345',
            violaNumber: '23',
            violaRate: '10.99%',
            action: '查看明细'
          },
          {
            department: '技术部s',
            orderTotal: '2345',
            violaNumber: '23',
            violaRate: '10.99%',
            action: '查看明细'
          },
          {
            department: '技术部x',
            orderTotal: '2345',
            violaNumber: '23',
            violaRate: '10.99%',
            action: '查看明细'
          },
          {
            department: '技术部c',
            orderTotal: '2345',
            violaNumber: '23',
            violaRate: '10.99%',
            action: '查看明细'
          },
          {
            department: '技术部v',
            orderTotal: '2345',
            violaNumber: '23',
            violaRate: '10.99%',
            action: '查看明细'
          },
          {
            department: '技术部d',
            orderTotal: '2345',
            violaNumber: '23',
            violaRate: '10.99%',
            action: '查看明细'
          },
          {
            department: '技术部a',
            orderTotal: '2345',
            violaNumber: '23',
            violaRate: '10.99%',
            action: '查看明细'
          },
          {
            department: '技术部d',
            orderTotal: '2345',
            violaNumber: '23',
            violaRate: '10.99%',
            action: '查看明细'
          }
        ]
      };
    },
    mounted() {
      var departmentVt = echarts.init(document.getElementById('violationDpment'));
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        // color:['red',''],  //循环颜色
        legend: {
          orient: 'vertical',
          x: 'left',
          //bottom: 10,
          //left: 'center',
          data: ['未选择最低价', '超出差旅标准', '未提前预定', '无差旅计划', '超出计划金额']
        },
        series: [
          {
            name: '全部',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '16',
                  //fontWeight: 'bold',
                  color: '#454545'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 2315,
                name: '未选择最低价',
                itemStyle: {
                  normal: {color: '#74b2f1'}
                }
              },
              {
                value: 6716,
                name: '超出差旅标准',
                itemStyle: {
                  normal: {color: '#a9d769'}
                }
              },
              {
                value: 5439,
                name: '未提前预定',
                itemStyle: {
                  normal: {color: '#96a2f5'}
                }
              },
              {
                value: 4437,
                name: '无差旅计划',
                itemStyle: {
                  normal: {color: '#efad5c'}
                }
              },
              {
                value: 12890,
                name: '超出计划金额',
                itemStyle: {
                  normal: {color: '#5cc4de'}
                }
              }
            ]
          }
        ]
      };
      departmentVt.setOption(option);
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .travel-illegal {
    height: 100%;
    width: 100%;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .con{
    margin-top: 20px;
    padding: 20px;
    background-color: #FFFFFF;
    .con-left{
      width:50%;
      .title-left{
        line-height: 35px;
        font-size: 14px;
        font-weight: bold;
        border-bottom: 1px solid #dddee1;
      }
    }
    .con-right{
      width: 50%;
      .tabTopNm{
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 10px;
        span{
          color: #7aa9ff;
        }
      }
    }
  }
  .content {
    margin-top: 20px;
    padding: 20px;
    background-color: #FFFFFF;
    .tab-left {
      line-height: 35px;
      font-size: 14px;
      font-weight: bold;
    }
    .orderTab {
      width: calc(50% - 10px);
      .tabTopNm {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 10px;
        span {
          color: #7aa9ff;
        }
      }
    }
    .chart {
      width: calc(50% - 10px);
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  /*table的不要边框样式*/
  .tabBorderNo {
    border: none;
    .ivu-table:after {
      content: '';
      width: 0px;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      background-color: #dddee1;
      z-index: 3;
    }
    .ivu-table:before {
      content: '';
      width: 100%;
      height: 0px;
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: #dddee1;
      z-index: 1;
    }
    .ivu-table td, .ivu-table th {
      border-bottom: none !important;
    }
    .ivu-table th {
      font-size: 14px;
      color: #333333;
      font-weight: 400;
    }
  }

  .ivu-tabs-nav {
    float: right;
  }

  .ivu-tabs-nav-right {
    float: left;
  }

  .ivu-btn-text:focus {
    box-shadow: none;
  }
</style>
